<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>PDF Viewer</h1>
      </el-header>
      <el-main>
        <div class="pdf-viewer-wrap" :style="{ border: isShowBorder ? '1px solid #ccc' : 'none' }">
          <iframe
            id="pdf-viewer"
            frameborder="0"
            scrolling="no"
            class="pdf-viewer noBorder noScrolling"
            :src="pdfUrl"
            width="100%"
            height="600px"
          ></iframe>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: '/100C1 PowerCube 1000 V300R008C00SPC131 升级指导书.pdf#page=5',
      isShowBorder: true,
    };
  },
};
</script>

<style>
.pdf-viewer-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.pdf-viewer {
  width: 100%;
  height: 600px;
}
</style>